<template>
  <div class="user-orders">
    <a-table :columns="columns" :data-source="orders" :pagination="{ pageSize: 5 }">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-space size="small">
            <a @click="showOrderDetails(record)">查看详情</a>
            <a v-if="record.status === '待付款'" @click="payOrder(record)">付款</a>
            <a v-if="record.status === '待收货'" @click="confirmReceipt(record)">确认收货</a>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const columns = [
  {
    title: '订单号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '商品名称',
    dataIndex: 'productName',
    key: 'productName',
  },
  {
    title: '订单金额',
    dataIndex: 'amount',
    key: 'amount',
  },
  {
    title: '订单状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '下单时间',
    dataIndex: 'orderTime',
    key: 'orderTime',
  },
  {
    title: '操作',
    key: 'action',
  },
];

const orders = ref([
  {
    id: 'ORDER001',
    productName: '二手笔记本电脑',
    amount: '¥2999',
    status: '待付款',
    orderTime: '2023-05-01 10:00:00',
  },
  {
    id: 'ORDER002',
    productName: '二手自行车',
    amount: '¥399',
    status: '待收货',
    orderTime: '2023-04-28 14:30:00',
  },
  {
    id: 'ORDER003',
    productName: '二手课本',
    amount: '¥50',
    status: '已完成',
    orderTime: '2023-04-25 09:15:00',
  },
]);

const showOrderDetails = (record) => {
  console.log('查看订单详情:', record);
};

const payOrder = (record) => {
  console.log('支付订单:', record);
};

const confirmReceipt = (record) => {
  console.log('确认收货:', record);
};
</script>

